<template>
    <div ref="myEchart" @mouseenter="echartMousedown" @mouseleave="echartMouseenter" style="width:900px;height:600px"></div>
</template>

<script>
import echartMapData from '@/utils/echartsMap/echartsMap.json'
import '@/utils/echartsMap/js/china'

export default {
  name:'echartsMap',
  data(){
    return {
      mapNum:-1,  //记录轮播次数 
      mapIndex:-1, //高亮的索引
      mapTime:null,  // 定时器索引 必须有 
      mapData:[
        {
          addvnm:'天津',
          name:'201台',
          saturation:'0.21%',
          latitude:'44.0652',
          longitude:'87.41881'
        },
        {
          addvnm:'辽宁',
          name:'202台',
          saturation:'12.7%',
          latitude:'44.0652',
          longitude:'87.41881'
        },
        {
          addvnm:'湖北',
          name:'203台',
          saturation:'52.7%',
          latitude:'44.0652',
          longitude:'87.41881'
        },
        {
          addvnm:'山西',
          name:'204台',
          saturation:'99.9%',
          latitude:'44.0652',
          longitude:'87.41881'
        },
      ],
      outdata:[] //高亮黄色地图数据
    }
  },

  methods:{
    // 地图配色统一淡蓝色 高亮黄色 (更简约好看)
    init(){
      this.myChart = this.$echarts.init(this.$refs.myEchart)
      let obj = {
        站点比率:'saturation', 
        站点经度:'latitude',
        站点纬度:'longitude',
      }
      //数据处理函数 参数1:请求回来的数据 参数2:需要展示的内容字段
      // 返回值 处理完成可以直接展示的数据
      this.outdata = this.dataFilter(this.mapData,obj) 

      let option = {
        tooltip: {
            show: true,
            trigger: "item",
             extraCssText: 'transform: translate(-10px,-10px);', // 设置提示框宽高等css样式
            formatter: function (params) {

               if(params.data.addvnm){
                let str = ''
                Object.keys(obj).forEach(item=>{
                  str += `${item} : ${params.data[obj[item]]} </br>`
                })
                return `
                  政区 : ${params.data.name} </br>
                  站点名称 : ${params.data.addvnm} </br>
                  ${str}
                `
               }else{
                 return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;' 
               }
            }
        },

        // visualMap: {
        //     show: true,
        //     left: '2%',
        //     bottom: '1%',
        //     calculable:true,
        //     min: 0,
        //     max: 400,
        //     text: ['400', '0'],
        //     seriesIndex: [1],
        //     inRange: {
        //       color: ['#41A7DE', '#eac736', '#fffc00', '#ff2600']
        //     },
        //     splitNumber: 0
        // },
        geo: {
            map: 'china',
            show: true,
            roam: false,
            zlevel: 10,
            label: {
              normal: {
                  show: true
              },
              emphasis: {
                  show: true
              }
            },
            itemStyle: {
              areaColor: '#b7d6f3',
              borderColor: '#fff',
              borderWidth: 1,
            },
            emphasis: {
              label: {
                  color: '#FFAE00',
              },
              itemStyle: {
                  areaColor: null,
                  borderWidth: 1,
                  shadowColor: 'rgba(0,0,0,.2)',
                  shadowOffsetX: 5,
                  shadowOffsetY: 5
              }
            },
        },
        series: [{
            name: '地图',
            type: 'map',
            map: 'china',
            aspectScale: 0.75,
            geoIndex: 0,
            zoom: 1.1,
            zlevel: 10,
            data: this.outdata
        },
        ]
      }
      this.myChart.setOption(option)
      this.echartsCarousel()
    },  
    // 地图配色淡蓝色深蓝色相间 高亮红色
    init1(){
      // 获取地理数据   
      // var uploadedDataURL = '//img.isqqw.com/profile/upload/2023/10/26/94c2814c-5749-43b4-b5b4-d7ab32ad5155.json';
      this.mapData = [
        { name: '北京市', value: 111 },
        { name: '天津市', value: 222 },
        { name: '江西省', value: 333 },
        { name: '湖北省', value: 444 },
      ];
      // 发个请求获取一下地图数据
      this.$echarts.registerMap('china', echartMapData);
      this.myChart = this.$echarts.init(this.$refs.myEchart)
      let  option = {
        //数据分段
        visualMap: {
          show: false,
          min: 0,
          max: 1000,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'],
          calculable: false,
          orient: 'horizontal',
          inRange: {
            color: ['#dcecfc', '#006edd'],
            symbolSize: [30, 100],
          },
        },
        // 悬浮窗
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0,0,0,0.8)', //设置背景图片 rgba格式
          color: '#fff',
          borderWidth: '1', //边框宽度设置1
          borderColor: 'gray', //设置边框颜色
          textStyle: {
            color: '#fff', //设置文字颜色
          },
          extraCssText: 'width:120px;height:40px;transform: translate(-10px,-10px);', // 设置提示框宽高等css样式
          formatter: function (params) {
            console.log('当前的dataIndex:', params.dataIndex , '数据中的名字 : ' ,echartMapData.features[params.dataIndex].properties.name ,'实际的名字 : ',params.name);
            // return `${params.name}: <br /> ${params.value || 0}辆`;
            return  params.name;
          },
        },
        geo: {
          // 这个是重点 —— 这里设置为地图的阴影
          map: 'china', // 表示中国地图
          roam: false, // 禁止拖拽
          label: {
            // 标志信息
            show: false, // 是否显示对应地名
          },
          silent: true, // 禁止hover效果
          zoom: 1, // 地图比例
          aspectScale: 1, // 比例
          center: [105.194115019531, 36.582111640625], // 地图中心位置， 此处的纬度与下面的center相差1度是形成阴影的距离，可自己随意调整
          itemStyle: {
            areaColor: '#1c84f4', //地图阴影的颜色
            // areaColor: {
            //   image: img, // 背景图
            //   repeat: 'repeat-x', // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
            // },
            borderColor: '#1c84f4', // 省份边框颜色
            borderWidth: 0.2, // 省份边框宽度
            shadowColor: '#fff', // 省份边框阴影rgba(100,255,238,0.5)
            shadowBlur: 5, // 省份边框聚焦
          },
          emphasis: {
            show: false,
          },
          //地图的阴影不显示南沙诸岛
          regions: [
            {
              name: '南海诸岛',
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0, // 为 0 时不绘制该图形
                },
                emphasis: {
                  opacity: 0,
                },
              },
              label: {
                show: false, // 隐藏文字
              },
            },
          ],
        },
        //配置属性
        series: [
          {
            type: 'map',
            map: 'china',
            zoom: 1.4,
            aspectScale: 0.9, // 比例
            zlevel: 1, // 设置地图的层级，将该地图上移（类似z-index）
            emphasis: {
              // 鼠标hover是否显示内容，可自己调节
              label: {
                show: true,
                color: '#fff',
              },
              itemStyle: {
                show: true,
                color: '#00114F', // 高亮文字颜色
                borderColor: '#f43c24', // 高亮边框颜色
                areaColor: '#f47c84', //高亮区域颜色
              },
            },
            label: {
              // 地图标注
              show: true, // 是否显示对应地名
              //由于鼠标放在地图上时，省份字体颜色会有一个从默认色到红色的颜色跳动，所以即使normal时省份字体不显示，也设置为红色，视觉优化颜色跳动问题
              color: '#000',
            },
            itemStyle: {
              borderColor: '#fff', // 省份边框颜色
              borderWidth: 1.5, // 省份边框宽度
              shadowColor: '#fff', // 省份边框阴影rgba(100,255,238,0.5)
              shadowBlur: 5, // 省份边框聚焦
              areaColor: '#dcecfc',
            },
            center: [105.194115019531, 35.582111640625], // 设置地图中心
            data: this.mapData,
          },
        ],
      };
      this.myChart.setOption(option)

      // 保存一下数据的长度
      this.dataLength = echartMapData.features.length
      // 轮播高亮地图
      this.echartsCarousel()
    },
    // 轮播展示
    echartsCarousel(){
      this.mapTime = setInterval(() => {
        // 有固定展示数据
        if(this.mapData.length){
          // 保持轮播 到最大归0
          if (this.mapNum < this.mapData.length - 1) {
            this.mapNum++;
          } else {
            this.mapNum = 0;
          }
          this.myChart.dispatchAction({
            type: 'downplay', // 取消高亮
            seriesIndex: 0
          })

          // 要想轮播固定的省份  需要将每一条数据对应的索引确定 , 只需要修改索引即可
          this.mapIndex = this.outdata.findIndex(item=>item.name == this.mapData[this.mapNum].addvnm)

          // 重置图表
          // this.myChart.resize();
          // 高亮当前图形
          this.myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: this.mapIndex,
          });

          // 重新高亮
          this.myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: this.mapIndex, 
          });
        }else{
          // 保持轮播 到最大归0
          if (this.mapNum < this.outdata.length - 1) {
            this.mapNum++;
          } else {
            this.mapNum = 0;
          }

          // 取消高亮
          this.myChart.dispatchAction({
            type: 'downplay', 
            seriesIndex: 0
          })
          // 重新高亮
          this.myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: this.mapNum,
          });

          // 重新弹窗
          this.myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: this.mapNum, 
          });

        }

      }, 1000);
    },
    // 鼠标划入清除定时器
    echartMousedown(){
      clearInterval(this.mapTime)
      // 清除的时候把标记也清除掉
      this.myChart && this.myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: this.mapIndex,
      });
    },
    // 划出开启
    echartMouseenter(){
      this.echartsCarousel()
    },
    // 数据过滤
    dataFilter(outvalue,obj){
      // 所有地区 名字格式固定
      let outname = [ '北京', '天津', '上海', '重庆', '河北', '河南', '云南', '辽宁', '黑龙江', '湖南', '安徽', '山东', '新疆', '江苏', '浙江', '江西', '湖北', '广西', '甘肃', '山西', '内蒙古', '陕西', '吉林', '福建', '贵州', '广东', '青海', '西藏', '四川', '宁夏', '海南', '台湾', '香港', '澳门','南海诸岛']
      let outdata = []  //地图上最终会展示出来的数据
      outname.forEach(item=> outdata.push({name:item})) //先把所有的政区名字放进去

      // 循环接口返回内容
      outvalue.forEach((item,idx)=>{
        // 获取对应位置的索引
        let index = outdata.findIndex(element=> item.addvnm == element.name)
        // 对应位置固定内容赋值
        outdata[index] = {
          addvnm:item.name,
          name:item.addvnm
        }
        // 对应内容变量赋值
        Object.values(obj).forEach(element=> outdata[index][element] = item[element])
      })
      return outdata
    }
  },

  watch:{},
  computed:{},

  created(){},
  mounted(){
    this.init()
  },
  beforeDestroy(){
    this.echartMousedown() //清除一下定时器
  }

}

</script>

<style scoped lang="less">

</style>